<template>
	<div class="dialog">
		<div class="content">
			<div class="bg">
				<div class="img">
					<img :src="modalInfo.imgSrc" class="img_bg"/>
				</div>
				<div class="title">{{modalInfo.tipTitle}}</div>
				<div class="des">{{modalInfo.tipContent}}</div>
				<div class="line_h"></div>
				<div class="box">
					<div class="btn box_btn_cancel" @click="cancel()">取消</div>
					<div class="line_v"></div>
					<div class="btn box_btn" @click="sure()">{{modalInfo.btnTitle}}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name:"modal",
		props: {
			modalInfo: {
				type: Object,
				default: {}
			},
			onResult: {
				obj: Object,
				required: false
			},
			
		},
		data() {
			return {
				tipText: '',
				isShow: false
			};
		},
		methods: {
			sure() {
				let obj = {}
				obj.isCancel = false
				this.onResult(obj)
			},
			cancel() {
				let obj = {}
				obj.isCancel = true
				this.onResult(obj)
			}
		}
	}
</script>

<style lang="scss" scoped>
.dialog {
  visibility: visible;
  position:fixed;
  width: 100%;
  height: 100%;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  overflow:hidden;
  display: flex;
  align-items:center;
  justify-content:center;
  z-index: 10000;
}
@keyframes delayHide {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
.content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items:center;
  justify-content:center;
  background: rgba(0, 0, 0, 0.2);
	.bg {
	  position: relative;
	  width: 80%;
	  background: white;
	  border-radius: 1rem;
	  background-image: linear-gradient(217deg, rgba(247, 232, 223,.8), rgba(255,0,0,0) 30.71%),
	                    linear-gradient(167deg, rgba(250, 228, 217,.8), rgba(0,255,0,0) 40.71%),
	                    linear-gradient(336deg, rgba(255, 255, 255,.8), rgba(0,0,255,0) 50.71%);
		.img{
			margin-top: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.img_bg{
				width: 160rpx;
			  // height: 70rpx;
			}
		}
		.title {
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  margin-top: 20rpx;
		  color: #333;
		  font-size: 36rpx;
			font-weight: 600;
		}
		.des {
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  padding: 20rpx 40rpx 40rpx;
		  color: #999;
		  font-size: 28rpx;
		}
		.line_h {
		  position: relative;
		  width: 100%;
		  height: 1rpx;
		  background: #EAEAEA;
		}
		.box {
		  position: relative;
		  width: 100%;
		  height: 100%;
		  display: flex;
			.btn{
				position: relative;
				flex: 1;
				padding-top: 26rpx;
				padding-bottom: 26rpx;
				display: flex;
				align-items:center;
				justify-content:center;
				font-size: 32rpx;
			}
			.box_btn_cancel {
			  color: #666;
			}
			
			.line_v {
				position: relative;
				width: 1rpx;
				background: #EAEAEA;
			}
			.box_btn {
			  font-weight: 500;
			  color: #FF814B;
			}
		}
	}
}
</style>